<template>
  <div class="home-container">
    <!-- 顶部欢迎栏 -->
    <div class="welcome-section">
      <h1>欢迎回来，{{ userName }}！</h1>
      <p class="subtitle">请选择您要使用的功能</p>
    </div>

    <!-- 功能选择区 -->
    <div class="features-grid">
      <!-- 语音识别功能 -->
      <div
        class="feature-card"
        @click="$router.push({ name: 'Upload' })"
      >
        <div class="card-icon">
          <i class="fas fa-microphone-alt"></i>
        </div>
        <h2>文字语音识别</h2>
        <p>语音转文字，支持多语言识别，精准高效</p>
        <div class="card-hover-effect"></div>
      </div>

      <!-- 翻译功能 -->
      <div 
        class="feature-card"
        @click="$router.push({ name: 'RealTime' })"
      >
        <div class="card-icon">
          <i class="fas fa-language"></i>
        </div>
        <h2>实时语音转文字</h2>
        <p>实时多语言转文字，支持专业领域术语，转录准确</p>
        <div class="card-hover-effect"></div>
      </div>

      <!-- 新增功能 -->
      <div 
        class="feature-card"
        @click="$router.push({ name: 'Settings' })"
      >
        <div class="card-icon">
          <i class="fas fa-cog"></i>
        </div>
        <h2>系统设置</h2>
        <p>个性化配置，管理账户信息，调整系统偏好</p>
        <div class="card-hover-effect"></div>
      </div>
    </div>

    <!-- 装饰元素 -->
    <div class="decorative-circle"></div>
    <div class="decorative-circle-2"></div>
    <div class="decorative-circle-3"></div>
    
    <!-- 浮动元素 -->
    <div class="floating-element floating-element-1"></div>
    <div class="floating-element floating-element-2"></div>
    <div class="floating-element floating-element-3"></div>
    <div class="floating-element floating-element-4"></div>

    <div class="app-footer">
      © 2025 智能语音与翻译平台 | 让沟通无障碍 | 版本 1.0
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      userName: '实训测试' // 实际应从Vuex或全局状态获取
    }
  },
  methods: {
    navigateTo(routeName) {
      // 实际项目应使用Vue Router进行导航
      const routeMap = {
        'speech-recognition': '语音识别',
        'translation': '文本翻译',
        'settings': '系统设置'
      };
      
      const featureName = routeMap[routeName] || '功能';
      
      // 创建临时弹窗
      const notification = document.createElement('div');
      notification.textContent = `正在进入${featureName}功能...`;
      notification.style.cssText = `
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.8);
        color: white;
        padding: 12px 25px;
        border-radius: 30px;
        z-index: 1000;
        animation: fadeIn 0.3s, fadeOut 0.3s 1.5s forwards;
      `;
      
      document.body.appendChild(notification);
      
      // 添加动画关键帧
      const style = document.createElement('style');
      style.textContent = `
        @keyframes fadeIn {
          from { opacity: 0; transform: translateX(-50%) translateY(20px); }
          to { opacity: 1; transform: translateX(-50%) translateY(0); }
        }
        @keyframes fadeOut {
          from { opacity: 1; }
          to { opacity: 0; }
        }
      `;
      document.head.appendChild(style);
      
      setTimeout(() => {
        document.body.removeChild(notification);
        document.head.removeChild(style);
      }, 2000);
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.home-container {
  /* min-height: 100vh;  // 移除全屏高度 */
  width: 100%;
  /* display: flex; */ /* 移除flex布局 */
  /* flex-direction: column; */
  /* background: linear-gradient(135deg, #1a2a6c, #2c3e50, #4a6491); // 移除全屏背景 */
  position: relative;
  /* overflow: hidden; // 移除全屏溢出隐藏 */
  padding-bottom: 2rem; /* 保证底部留白 */
}

.welcome-section {
  text-align: center;
  margin-bottom: 2rem;
  /* flex-shrink: 0; */
  padding-top: 1rem;
  animation: fadeIn 1s ease-out;
}

.welcome-section h1 {
  font-size: 2.8rem;
  color: #1a2a6c; /* 改为深色，适配白色卡片 */
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.subtitle {
  color: #4a6491;
  font-size: 1.3rem;
  letter-spacing: 1px;
}

.features-grid {
  /* flex: 1; */
  /* display: grid; */
  /* grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); */
  /* gap: 2.5rem; */
  /* position: relative; */
  /* z-index: 2; */
  /* align-content: center; */
  /* width: 100%; */
  /* padding: 1rem; */
}

.feature-card {
  margin-bottom: 2rem;
  padding: 1.5rem 1rem;
  background: #f7f9fc;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.feature-card:hover {
  box-shadow: 0 4px 16px rgba(74,100,145,0.12);
}

.feature-card h2 {
  color: #1a2a6c;
  font-size: 1.6rem;
  margin: 0.75rem 0 0.5rem;
}

.feature-card p {
  color: #4a6491;
  font-size: 1rem;
  line-height: 1.4;
}

/* 装饰元素和浮动元素可保留，但建议缩小尺寸和范围，避免溢出卡片 */
.decorative-circle,
.decorative-circle-2,
.decorative-circle-3 {
  position: absolute;
  border-radius: 50%;
  opacity: 0.12;
  z-index: 0;
}
.decorative-circle {
  width: 120px; height: 120px;
  background: #4a6491;
  top: 30px; left: 30px;
}
.decorative-circle-2 {
  width: 80px; height: 80px;
  background: #1a2a6c;
  bottom: 40px; right: 60px;
}
.decorative-circle-3 {
  width: 60px; height: 60px;
  background: #2c3e50;
  top: 60%; left: 80%;
}

.floating-element {
  position: absolute;
  border-radius: 50%;
  opacity: 0.08;
  z-index: 0;
}
.floating-element-1 {
  width: 40px; height: 40px;
  background: #4a6491;
  top: 10%; left: 80%;
}
.floating-element-2 {
  width: 30px; height: 30px;
  background: #1a2a6c;
  bottom: 15%; right: 20%;
}
.floating-element-3 {
  width: 20px; height: 20px;
  background: #2c3e50;
  top: 70%; left: 10%;
}
.floating-element-4 {
  width: 25px; height: 25px;
  background: #4a6491;
  bottom: 10%; left: 30%;
}

.app-footer {
  text-align: center;
  color: #b0b8c9;
  font-size: 0.95rem;
  margin-top: 2rem;
  z-index: 2;
}
</style>